<template>
  <div class="Declare-Body">
    <mu-appbar style="width: 100%;" color="white" text-color="primary" z-depth="0">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      申报
      <mu-button style="font-size: 20px;width: 80px" icon slot="right" @click="submit">
        提交
      </mu-button>
    </mu-appbar>
    <div class="input-class">
      <mu-form ref="form" :model="validateForm">
        <mu-list>
          <mu-paper :z-depth="0" v-bind:key="index" v-for="(model,index) in modelList">
            <mu-paper v-if="model.type === 'Field' && !model.multiLine">
              <mu-list-item>
                <mu-list-item-action class="item-action">
                  <h4>{{model.label }}：</h4>
                </mu-list-item-action>
                <mu-list-item-content>
                  <mu-text-field full-width v-model="model.value" solo
                                 :placeholder="model.placeholder"></mu-text-field>
                </mu-list-item-content>
              </mu-list-item>
              <mu-divider class="divider"></mu-divider>
            </mu-paper>
            <mu-paper v-if="model.type === 'Field' && model.multiLine">
              <mu-list-item>
                <mu-list-item-action class="item-action">
                  <h4>{{model.label }}：</h4>
                </mu-list-item-action>
              </mu-list-item>
              <mu-form-item style="padding:0 1.5rem 0 1.5rem;" prop="body">
                <mu-text-field :max-length="model.maxlength" v-model="model.value" full-width
                               :placeholder="model.placeholder"
                               multi-line :rows="model.rows"
                               :rows-max="model.rowsMax" solo></mu-text-field>
              </mu-form-item>
              <mu-divider class="divider"></mu-divider>
            </mu-paper>
            <mu-paper v-if="model.type === 'Select'">
              <mu-paper style="padding:0 1.5rem 0 1.5rem;">
                <mu-flex class="flex-wrapper" align-items="center">
                  <mu-flex class="flex-demo" justify-content="start" fill><h4>{{model.label }}：</h4></mu-flex>
                  <mu-flex style="width: 70%;height: 20px;" justify-content="start" fill>
                    <mu-select solo :multiple="model.multiple" v-model="model.value" full-width>
                      <mu-option v-for="(item,index) in model.options" :key="item.value + index" :label="item.label"
                                 :value="item.value"></mu-option>
                    </mu-select>
                  </mu-flex>
                </mu-flex>
              </mu-paper>
              <mu-divider class="divider"></mu-divider>
            </mu-paper>
          </mu-paper>
        </mu-list>
      </mu-form>
    </div>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';
  import Uploader from '@/components/uploader';

  export default {
    data() {
      return {
        openFullScreen1: false,
        modelList: [],
        max: 30,
        images: [],
        uploadUrl: this.baseUrl + "/file/uploader",
        params: {},
        title: this.$route.query.title ? this.$route.query.title : '申报',
        options: [{
          value: 1,
          label: '个人'
        }, {
          value: 2,
          label: '公司（机构）'
        }, {
          value: 3,
          label: '行政机关'
        }],
        forget: false,
        validateForm: {
          caseId: this.$route.query.caseId ? this.$route.query.caseId : '',
          name: '',
          phone: '',
          email: '',
          valuationTotal: '',
          reason: '',
          identityType: 1,
          relevantFiles: ''
        }
      }
    },
    components: {
      Uploader,
      headerBack
    },
    created() {
    },
    watch: {},
    mounted() {
      this.getModel();
    },
    methods: {
      getModel() {
        const _self = this;
        let params = {
          id: this.$route.query.caseId
        };
        this.postRequest("/model/getModel", params).then(res => {
          if (res.code === 200 && res.data) {
            _self.modelList = res.data.list;
          }
        });
      },
      openFullScreenDialog1() {
        this.openFullScreen1 = true;
      },
      closeFullScreenDialog1() {
        this.openFullScreen1 = false;
      },
      openFullScreenDialog() {
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      toLogin() {
        this.forget = false;
      },
      toForget() {
        this.forget = true;
      },
      submit() {
        const submitData = {};
        submitData.modelId = this.$route.query.caseId;
        const elements = [];
        if (this.modelList && this.modelList instanceof Array) {
          this.modelList.map(model => {
            elements.push({key: model.key, value: model.value});
          })
        }
        submitData.elements = elements;
        console.log(submitData);
        this.postRequest("/declare/apply", submitData).then(res => {
          if (res.code === 200) {
            this.$toast.info("申报成功！");
            this.$router.push({name: "home"});
          }
        });
      },
      clear() {
        this.$refs.form.clear();
        this.validateForm = {
          username: '',
          password: ''
        };
      },
      onRemove(e) {
        this.images.splice(this.images.indexOf(e), 1);
      },
      onChange(fileList) {
      },
      onCancel() {
      },
      onSuccess(res) {
        this.images.push(res);
      },
      onError(res) {
      }
    }
  }
</script>
<style scoped lang="less">
  .Declare-Body {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99;
    background-color: #f9f9f9;
    overflow: hidden;
  }

  .input-class {
    height: 93%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .header {
    margin-left: 1rem;
  }

  .text-field {
    width: 100%;
  }

  .paper {
    padding: 0.5rem;
  }

  .right-title {
    text-align: right;
    margin-right: -2.5rem;
    color: #929292
  }

  .item-action {
    width: 30%;
    color: black;
  }

  .divider {
    width: 92%;
    margin: 0 auto;
    /*color: #f9f9f9*/
  }

  .more {
    float: right;
    margin-right: 1.3rem
  }

  .flex-wrapper {
    width: 100%;
    height: 4.4rem;
    padding-bottom: 2rem;
  }

  .flex-demo {
    width: 30%;
    height: 32px;
  }

  .flex-wrapper:first-child {
    margin-top: 0;
  }

  .flex-demo:first-child {
    margin-left: 0;
  }
</style>
